<template>
    <div :class="{
        'page-main': true,
        'is-collaspe': collaspeData
    }" :style="{
        'height': collaspeData ? height : ''
    }"
    >
        <div v-if="title" class="title-container flex align-center justify-between">
            <div class="flex">
                <svg-icon v-if="titleIcon" :name="titleIcon" class="title-icon"/>
                {{ title }}
                <span class="title-other">{{ titleOther }}</span>
                <div class="title-other-content">
                    <slot name="title-other-content"></slot>
                </div>
            </div>
            <div>
                <slot name="title-left"/>
            </div>
        </div>
        <slot/>
        <div v-if="collaspeData" class="collaspe" title="展开" @click="uncollaspe">
            <i class="el-icon-arrow-down"/>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
    name: 'PageMain',
    components: {SvgIcon},
    props: {
        title: {
            type: String,
            default: ''
        },
        titleOther: {
            type: String,
            default: ''
        },
        titleIcon: {
            type: String,
            default: ''
        },
        collaspe: {
            type: Boolean,
            default: false
        },
        height: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            collaspeData: this.collaspe
        }
    },
    methods: {
        uncollaspe() {
            this.collaspeData = false
        }
    }
}
</script>

<style lang="scss" scoped>
.title-other {
    font-size: 10px;
    color: #afaaaa;
    margin-left: 10px;
    position: relative;
    top: 5px;
}
.title-icon {
    font-size: 17px;
    margin-right: 5px;
    color: #0079fe;
}
.title-other-content {
    margin-left: 15px;
}
.page-main {
    position: relative;
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    //border-radius: 10px;
    //box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 12%);
    &.is-collaspe {
        overflow: hidden;
        .collaspe {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 40px 0 10px;
            text-align: center;
            font-size: 24px;
            color: #ccc;
            text-shadow: 0 0 1px #000;
            background: linear-gradient(to bottom, transparent, #fff);
            cursor: pointer;
            transition: 0.3s;
            &:hover {
                color: #333;
            }
        }
    }
    .title-container {
        width: calc(100% + 40px);
        padding: 14px 20px;
        margin-left: -20px;
        margin-top: -20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
}
</style>
